<!-- 管理后台 | 侧栏菜单 -->
<template>
  <!-- 控制台首页 -->
  <section class="back-container">
    <!-- 侧边栏 -->
    <aside class="back-aside">
      <!-- 菜单 -->
      <Menu :menuList="menuList"></Menu>
    </aside>
    <!-- 主体模块 -->
    <section class="back-content">
      <!-- 主体头部 -->
      <header class="back-content-header">
        <Header></Header>
      </header>
      <!-- 主体内容 -->
      <main class="back-content-main">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(crumb, index) in breadcrumbList" :key="index">{{ crumb.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </main>
    </section>
  </section>
</template>

<script>
import Menu from './common/Menu'
import Header from './common/Header'
import { mapState } from 'vuex'
export default {
  components: {Header, Menu},
  name: 'backHome',
  computed: mapState({
    breadcrumbList: state => state.back.breadcrumbList,
    menuList: state => state.back.menuList
  }),
  beforeDestroy () {
    this.$store.commit('back/initBreadcrumbList', [])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.back-container {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  .back-aside {
    width: auto;
    height: auto;
  }
  .back-content {
    width: auto;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
  }
  .back-content-header {
    height: 60px;
    flex: 0 1 auto;
  }
  .back-content-main {
    flex: 1 1 auto;
    height: 100%;
    .el-breadcrumb {
      width: calc(100% - 40px);
      padding: 10px 20px;
    }
  }
}
</style>
